<template>
  <div class="waiter">
    <div class="waiter_title">员工审核</div>
    <!-- 表格 -->
    <el-table :data="waiterData.list" style="width: 100%" id="waiter_table">
      <el-table-column prop="id" label="编号" min-width="78" align="center"></el-table-column>
      <el-table-column prop="username" label="姓名" min-width="144" align="center"></el-table-column>
      <el-table-column prop="telephone" label="手机号" min-width="144" align="center"></el-table-column>
      <el-table-column prop="idCard" label="身份证号" min-width="144" align="center"></el-table-column>
      <el-table-column prop="bankCard" label="银行卡号" min-width="144" align="center"></el-table-column>
      <el-table-column label="注册时间" min-width="155" align="center">
        <template slot-scope="{row}">
          <span>{{row.registerTime | dateParse}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="144" align="center"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="{row}">
          <el-button type="text" size="small" @click="examineWaiter(row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="waiter_page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog title="审核员工" :visible.sync="dialogFormVisible">
      <div class="box">
        <div class="box_left">
          <div>
            用户名：
            <span>{{findWaiter.username}}</span>
          </div>
          <div>身份证正面照</div>
          <div class="box_img">
            <img :src="findWaiter.idcardPhotoPositive" alt="未上传..." width="78%" height="100px" />
          </div>
        </div>
        <div class="box_right">
          <div>
            身份证号：
            <span>{{findWaiter.idCard}}</span>
          </div>
          <div>身份证反面照</div>
          <div class="box_img">
            <img :src="findWaiter.idcardPhotoNegative" alt="未上传..." width="78%" height="100px" />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="refuseWaiter">拒绝审核</el-button>
        <el-button type="success" round @click="publishWaiter">通过审核</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      page: 0,
      pageSize: 5,
      total: 10,
      dialogFormVisible: false,
      id: ""
    };
  },
  created() {
    this.loadWaiters();
  },
  computed: {
    ...mapState("waiter", ["waiterData", "findWaiter"])
  },
  methods: {
    ...mapActions("waiter", [
      "toLoadWaiters",
      "tofindWaiters",
      "toRefuseWaiter",
      "toPublishWaiter"
    ]),
    publishWaiter() {
      this.toPublishWaiter(this.id).then(res => {
        if (res.status !== 200) {
          this.$message({
            message: "信息不完整！",
            type: "warning"
          });
          this.dialogFormVisible = false;
        } else {
          this.$message({
            message: "通过成功！",
            type: "success"
          });
          this.loadWaiters();
          this.dialogFormVisible = false;
        }
      });
    },
    //拒绝审核
    refuseWaiter() {
      let obj={id:this.id}
      this.toRefuseWaiter(obj).then(res => {
        this.loadWaiters();
        this.$message({
            message: "拒绝成功！",
            type: "success"
          });
        this.dialogFormVisible = false;
      });
    },
    //点击审核
    examineWaiter(row) {
      this.dialogFormVisible = true;
      this.id = row.id;
      this.tofindWaiters(row.id);
    },
    //加载
    loadWaiters() {
      let obj = {
        page: this.page,
        pageSize: this.pageSize
      };
      this.toLoadWaiters(obj).then(res => {
        this.total = this.waiterData.total;
      });
    },
    //分页
    handleCurrentChange(val) {
      this.page = val - 1;
      this.loadWaiters();
    }
  }
};
</script>
<style scope>
.waiter {
  padding: 10px;
}
.waiter_title {
  border-bottom: 1px solid #ccc;
  height: 35px;
  line-height: 35px;
}
.waiter_page {
  margin-top: 10px;
}
.box {
  width: 100%;
  height: 180px;
  padding: 0 5px;
  line-height: 50px;
  font-size: 16px;
}
.box_left {
  height: 100%;
  width: 50%;
  float: left;
}
.box_right {
  height: 100%;
  width: 50%;
  float: right;
}
.box_img {
  border: 1px solid #ddd;
  box-shadow: 1px 1px 1px #eee;
  width: 78%;
  height: 100px;
}
</style>